.icon {
	display: inline-block; vertical-align: text-bottom; background-repeat: no-repeat; height: 30px;
	vertical-align: middle; line-height: 30px; color: #AAA; font-size: 12px; transition: background-color 0.3s;
}
.icon.icon-button:hover { background-color: #F3F3F3; outline: 0px solid #F3F3F3; transition: none; }
.icon.loading { pointer-events: none; animation: bounce .3s infinite alternate ease-out; animation-delay: 1s; }
/*.icon:focus { animation: clicked 1s ease-in-out forwards; }

@keyframes clicked {
	  0% { outline: 1px solid #F3F3F3; }
	100% { outline: 15px solid rgba(250, 108, 141, 0) }
}*/

.icon-profile { font-size: 7px; top: 1px; border-radius: 0.7em 0.7em 0 0; background: #FFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 7px }
.icon-profile:before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; border-radius: 50%; background: #FFF; }

/*.icon-comment { width: 16px; height: 10px; border-radius: 2px; background: #B10DC9; margin-top: 0px; display: inline-block; position: relative; top: -2px; }
.icon-comment:after { left: 9px; border: 2px solid transparent; border-top-color: #B10DC9; border-left-color: #B10DC9; background: transparent; content: ""; display: block; margin-top: 10px; width: 0px; margin-left: 7px; }
*/
.icon-comment {
	padding-left: 30px; padding-right: 10px; background-position: 5px 7px;
	background-image: url('');
}
.icon-comment:empty { padding-right: 0px }


.icon-edit {
	width: 16px; height: 16px; background-repeat: no-repeat; background-position: 6px center;
	background-image: url();
}
.icon-reply {
	padding-left: 25px; margin-left: 5px; padding-right: 10px; background-position: 5px 6px; height: 19px; line-height: 19px; background-position: 5px 0px;
	background-image: url();
}
.icon-reply:empty { padding-right: 0px }

.icon-share {
	padding-left: 32px; padding-right: 10px; background-position: 7px 5px;
	background-image: url('')
}
.icon-share:empty { padding-right: 0px }

.icon-heart {
	padding-left: 32px; padding-right: 2px; background-position: 7px 5px;
	background-image: url('')
}
.icon-heart.active { color: #5d68ff; filter: sepia(1) hue-rotate(192deg) brightness(0.55) saturate(5) }

.icon-up { font-weight: normal !important; font-size: 15px; font-family: Tahoma; vertical-align: -4px; padding-right: 5px; display: inline; height: 1px; }
.icon-upload {
	width: 26px; height: 26px; background-repeat: no-repeat;
	background-image: url('')
}

.icon-image {
	width: 22px; height: 18px; border-radius: 0px; overflow: hidden; margin: 4px 2px; display: inline-block; vertical-align: middle; position: relative;
	font-style: normal; color: #ddd; text-align: left; text-indent: -9999px; direction: ltr; box-sizing: border-box; border: 1px solid;
}
.icon-image:before {
    content: ''; pointer-events: none; position: absolute; width: 10px; height: 18px; left: -2px; top: 7px;
    transform: rotate(45deg); box-shadow: inset 0 0 0 32px, 10px -6px 0 0;
}
.icon-image:after {
    content: ''; pointer-events: none; position: absolute; width: 3px; height: 3px;
    border-radius: 50%; box-shadow: inset 0 0 0 32px; top: 3px; right: 5px;
}

.icon-mute {
	width: 17px; height: 14px; background-repeat: no-repeat; padding-right: 5px; vertical-align: -2px; opacity: 0.2;
	background-image: url('')
}

@keyframes bounce {
	  0% { transform: translateY(0); }
	100% { transform: translateY(-3px); }
}